<template>
  <div class="dl">
    <div class="login-center">
      <div class="inner">
        <h3>后台管理系统</h3>
        <div class="tj">
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
            size="mini"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                type="text"
                v-model="loginForm.username"
                auto-complete="off"
                placeholder="请输入用户名/邮箱/手机号"
                prefix-icon="iconfont icon-yonghu1"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                :type="flag ? 'password' : 'text'"
                v-model="loginForm.password"
                autocomplete="off"
                placeholder="请输入密码/验证码"
                prefix-icon="iconfont icon-mima"
                @keyup.native.enter="submitForm('ruleForm')"
              >
                <template #suffix>
                  <i
                    class="iconfont point"
                    :class="flag ? 'icon-eyes' : 'icon-eyes-'"
                    @click="flag = !flag"
                  ></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                :loading="isClick"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { login } from '@/api/users.js' 在vue中@/ 代表从根目录src开始
import { login } from '@/api/users.js'

export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名!'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码!'))
      } else {
        callback()
      }
    }
    return {
      // 1.0 表单的数据对象
      loginForm: {
        username: '',
        password: ''
      },
      // 2.0 表单的规则对象 - 要求字段名称和数据对象一致
      rules: {
        // validator 校验器   trigger  触发方式
        username: [{ validator: validateUserName, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }]
      },
      flag: true,
      isClick: false
    }
  },
  methods: {
    submitForm(formName) {
      this.flag = true
      // this.$refs 在vue中获取DOM   validate 校验
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isClick = true
          // 校验通过，可以发请求了
          // const {username, password} = this.loginForm
          // login(this.loginForm).then((res) => {
          //   console.log(res)
          // })
          // async 和 await 只能在一个函数中使用
          const { code, msg, data } = await login(this.loginForm)
          if (code === 1) {
            // element-ui 提供了一个页面提示的组件
            this.$message.success(msg)
            // window.localStorage.setItem('token', data.access_token)
            // 保存用户的信息和token
            window.localStorage.setItem('users', JSON.stringify(data))
            setTimeout(() => {
              this.$router.push('/')
            }, 1500)
          } else {
            this.isClick = false
            this.$message.error(msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.dl {
  height: 100%;
  // background-image: linear-gradient(45deg #3a59e7 20%,#304bce 25%,#23268f 50%); 填充背景颜色45度角切入，形成渐变
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;

  .login-center {
    width: 850px;
    height: 550px;
    background: url('../../assets/images/login-bj.jpg') no-repeat left 10px;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .inner {
      width: 320px;
      height: 320px;
      border-radius: 4px;
      background-color: rgba(25, 8, 62, 0.6);

      h3 {
        color: #fff;
        text-align: center;
        letter-spacing: 4px;
        font-size: 24px;
        font-weight: normal;
        margin-bottom: 30px;
      }
      .tj {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
